<template>
  <div class="search-w table-filter-form">
    <a-form :model="searchInfo" layout="inline" size="small">
      <a-form-item field="marketplaceId" hideLabel>
        <a-select v-model="searchInfo.marketplaceId" placeholder="站点" allow-clear style="width: 100px">
          <a-option v-for="(item, i) in markedtList" :key="i" :value="item.marketplaceId" :label="item.marketplaceName" />
        </a-select>
      </a-form-item>
      <a-form-item hideLabel>
        <a-select v-model="searchInfo.shopId" placeholder="选择店铺" :trigger-props="{ autoFitPopupMinWidth: true }" allow-clear style="width: 160px">
          <a-option v-for="(item, i) in shopList" :key="i" :value="item.id" :label="item.shopName" />
        </a-select>
      </a-form-item>
      <a-form-item hideLabel>
        <a-select v-model="searchInfo.currencyCode" placeholder="币种" style="width: 90px">
          <a-option v-for="(key, val) in currencySymbol" :key="val" :value="val" :label="val" />
        </a-select>
      </a-form-item>
      <a-form-item hideLabel>
        <a-range-picker v-model="searchInfo.times" shortcuts-position="left" :shortcuts="rangeShortcuts()" :allow-clear="false" style="width: 254px" />
      </a-form-item>
      <a-form-item hideLabel>
        <p class="other-time">环比：{{ targetMap.momStartDate }} ~ {{ targetMap.momEndDate }}</p>
      </a-form-item>
      <a-form-item hideLabel>
        <p class="other-time">年同比：{{ targetMap.yoyStartDate }} ~ {{ targetMap.yoyEndDate }}</p>
      </a-form-item>
      <a-form-item hideLabel>
        <a-button type="primary" @click="startSearch">搜索</a-button>
      </a-form-item>
    </a-form>
  </div>
  <div class="card-wrap advert-sales">
    <div class="card-item">
      <Title>
        <template #content>
          <div class="cursor" @click="toDetail">
            <span class="title">销售表现</span>
            <icon-double-right style="color: #999; margin-left: 5px; font-size: 16px" />
          </div>
        </template>
      </Title>
    </div>
    <!-- 图表 -->
    <SalesBoardChart ref="boardChartRef" source="shop" :targetMap="targetMap" :searchParams="searchParam" />
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted, nextTick } from 'vue'
  import SalesBoardChart from './components/salesBoardChart.vue'
  import { currencySymbol } from '@/utils/globalData'
  import { metricsByShop } from '@/api/dataBoard'
  import useBaseDataStore from '@/store/modules/base-data'
  import Title from './components/title.vue'
  import { getStartAndEndTime, rangeShortcuts } from '@/utils/timeFormat'
  import { useRouter } from 'vue-router'

  onMounted(() => {
    getMarketList()
    getShopList()
    startSearch()
  })

  const useBaseData = useBaseDataStore()
  const searchInfo = ref<any>({
    times: getStartAndEndTime('last_30_days'),
    currencyCode: 'USD',
  })
  const markedtList = ref<Array<any>>([])
  const shopList = ref<Array<any>>([])
  const router = useRouter()
  const searchParam = ref<any>({})
  const boardChartRef = ref()
  const targetMap = ref<any>({})

  // 获取站点
  async function getMarketList() {
    await useBaseData.getMarketList()
    markedtList.value = useBaseData.markedtList
  }
  // 获取店铺
  async function getShopList() {
    await useBaseData.getShopList()
    shopList.value = useBaseData.shopList
  }
  // 进入销售看板
  function toDetail() {
    router.push('/dataBoard/dealer/salesBoard')
  }

  //查询图表和表格数据
  async function startSearch() {
    searchParam.value = {
      timeZone: 'UTC',
      marketplaceIds: searchInfo.value.marketplaceId ? [searchInfo.value.marketplaceId] : null,
      shopIds: searchInfo.value.shopId ? [searchInfo.value.shopId] : null,
      currencyCode: searchInfo.value.currencyCode || 'USD',
      startDate: searchInfo.value.times?.[0],
      endDate: searchInfo.value.times?.[1],
    }

    if (!searchParam.value.startDate) return
    getTargetList()
    nextTick(() => {
      boardChartRef.value.refreshData()
    })
  }
  // 获取所有指标概览数据
  async function getTargetList() {
    const res: any = await metricsByShop(searchParam.value)
    targetMap.value = res?.data || {}
  }
</script>
<style lang="less" scoped>
  .search-w {
    background-color: #fff;
    padding: 10px;
    margin-bottom: 10px;
    .arco-form-item {
      margin-bottom: 0;
      margin-right: 10px;
    }
    .other-time {
      font-size: 12px;
      color: #999;
      margin-right: 10px;
    }
    :deep(.arco-radio-group-button) {
      padding: 0;
      .arco-radio-button {
        margin: 0;
        background-color: #fff;
        line-height: 26px;
        border: 1px solid var(--color-border);
        font-size: 12px;
        &:first-child {
          border-radius: 5px 0 0 5px;
        }
        &:last-child {
          border-radius: 0 5px 5px 0;
        }
      }
      .arco-radio-checked {
        border-color: rgb(var(--primary-6));
      }
    }
  }
</style>
